<template>
  <div class="" :class="['common-wrap']">
    <template v-if="type === 'COURSE'">
      <div class="title-wrap flex-wrap flex-text-mid flex-between" >
        <div class="fs-18 fc-333 fw-b flex-item flex-text-mid flex-wrap">
          <span class="nowrap">{{name}}</span>
        </div>
        <div class="fs-12 fc-666 select-icon" @click="toPage('course-list-center')">更多</div>
      </div>
    </template>

    <!-- 培训-->
    <div class="title-wrap flex-wrap flex-middle" v-else-if="type === 'TRAIN'">
      <span class="fs-18 fc-333 fw-b flex-item">{{ name }}</span>
      <span class="fs-12 fc-666 select-icon" @click="toPage('home-training', {type: '5'})">更多</span>
    </div>
    <!-- 练习-->
    <div class="title-wrap flex-wrap flex-middle" v-else-if="type === 'PRACTICE'">
      <span class="fs-18 fc-333 fw-b flex-item">{{name}}</span>
      <span class="fs-12 fc-666 select-icon" @click="toPage('home-practice')">更多</span>
    </div>
    <!-- 考试-->
    <div class="title-wrap flex-wrap flex-middle" v-else-if="type === 'EXAM'">
      <span class="fs-18 fc-333 fw-b flex-item">{{name}}</span>
      <span class="fs-12 fc-666 select-icon" @click="toPage('home-exam')">更多</span>
    </div>
	<!-- 问卷-->
	<div class="title-wrap flex-wrap flex-middle" v-else-if="type === 'QUESTIONNAIRE'">
	  <span class="fs-18 fc-333 fw-b flex-item">{{name}}</span>
	  <span class="fs-12 fc-666 select-icon" @click="toPage('home-questionnaire')">更多</span>
	</div>
    <CourseList
        :list="list"
        :hideReco="type === 'COURSE'"
        v-if="type === 'COURSE'"></CourseList>
    <trainingList
        :list="list"
        vertical
        v-else-if="type === 'TRAIN'"></trainingList>
    <practiceList
        :list="list"
        vertical
        v-else-if="type === 'PRACTICE'"></practiceList>
    <examList
        :list="list"
        vertical
        v-else-if="type === 'EXAM'"></examList>
		<questionnaireList
		    :list="list"
		    vertical
		    isHome
		    v-else-if="type === 'QUESTIONNAIRE'"></questionnaireList>
    <Data-empty v-if="list.length === 0"></Data-empty>
  </div>
</template>

<script>
import CourseList from '@/components/course/CourseList.vue'
import trainingList from '@/components/training/listItem'
import practiceList from '@/view/practice/listItem.vue'
import examList from '@/components/exam/listItem.vue'
import DataEmpty from '@/components/common/DataEmpty'
import VanTag from "@/components/vant/van-tag/van-tag.vue";
import questionnaireList from '@/components/questionnaire/listItem.vue'
import mockData from "@/mock/index/configData.json"
export default {
  name: 'HomeModulePage',
  head: function () {
    return {
      title: '首页',
    }
  },
  data() {
    return {
      list: []
    }
  },
  components: {
    VanTag,
    CourseList,
    trainingList,
    practiceList,
    examList,
	questionnaireList,
    DataEmpty
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  mounted() {
      this.initPage()
  },
  methods: {
    toPage(url, query = null) {
      if (!url) {
        this.$toast.warning('暂不支持，敬请期待')
      } else {
        this.$uniPush({
          name: url,
          query: query
        })
      }
    },
    initPage() {
      if (this.type === 'COURSE') {
        this.getCourseList()
      } else if (this.type === 'TRAIN') {
        this.getRecentTrainingList()
      }else if (this.type === 'PRACTICE') {
        this.getPractice()
      } else if (this.type === 'EXAM') {
        this.getExam()
      }else if(this.type === 'QUESTIONNAIRE'){
		  this.getQuestionList();
	  }

    },
    getRecentTrainingList() {
     this.list=mockData.trainingData;
    },
    getCourseList() {
		this.list=mockData.courseDtata;
    },
    getPractice() {
		this.list = mockData.practiceData;
    },
    getExam() {
		this.list=mockData.examData;
    },
	getQuestionList(){
		this.list=mockData.questionData;
	}
  }
}
</script>

<style lang="scss" scoped>
.bg-f6{
  background: #F6F6F6;
  padding-bottom: 1px;
}
.van-icon{
  color: var(--color);
}
.container-wrap {
  .content-wrap {
    padding-top: 62px;
    position: relative;
    z-index: 1;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 168px;
      background: var(--color);
    }
  }
  .search-bar {
    display: flex;
    position: fixed;
    width: 100%;
    background: var(--color);
    z-index: 10;
    align-items: center;
    padding: 16px 15px 12px;
    .icon-msg {
      width: 18px;
      height: 18px;
      background-image: url('../../static/image/icon_msg1.png');
      background-size: 100% 100%;
      margin-left: 15px;
      position: relative;
      i {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #DF0000;
        right: -5px;
        top: -3px;
        border-radius: 50%;
      }
    }
    .van-search {
      padding: 0;
      width: calc(100% - 40px);
      background: none;
      :deep(.van-icon-search){
        color: #fff;
      }
    }
    .van-search__content{
      background: #6CC5BF;
      :deep(.van-field__control){
        color: #fff;
      }
      :deep(){
        input::placeholder{
          color: #fff;
          opacity: 1;
        }
      }
    }
  }
}
.van-swipe-item{
  line-height: 0;
  .van-image{
    overflow: hidden;
    width: 100%;
  }
}
.menu-item{
  padding: 14px 0 0;
  text-align: center;
  flex: 0 0 25%;
  .menu-text{
    line-height: 18px;
    padding: 14px 0;
  }
}
.title-wrap{
  height: 42px;
}
.my-swipe{
  :deep(.van-swipe-item) {
    img {
      height: 138px;
      width: 100%;
      border-radius: 4px;
    }
  }
}
.common-shadow{
  height: 36px;
  padding: 10px;
  box-shadow: 0px 2px 6px 0px rgba(219, 219, 219, 0.3);
  border-radius: 4px;
  background: #fff;
  &.common-notice{
    background: var(--colorbg1);
  }
  .license-img{
    width: 16px;
    height: 16px;
    margin-right: 7px;
  }
  .license-close{
    width: 16px;
    height: 16px;
  }
  .notice-img{
    width: 23px;
    height: 14px;
  }
  .van-notice-bar{
    padding: 0 10px 0 5px;
    background: var(--colorbg1);
    height: 36px;
  }

  .select-icon{
    height: 17px;
    color: var(--color);
    border-left: 1px solid #C0E5E2;
    padding-left: 7px;
    &:after{
      border-left-color: var(--color);
      border-bottom-color: var(--color);
    }
  }
}
.more-msg {
  background-color: var(--colorbg1);
  color: var(--color);
  line-height: 0;
  padding: 7px 10px;
  .select-icon {
    padding-right: 12px;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    &::after {
      content:"";
      display: block;
      width: 6px;
      height: 6px;
      position: absolute;
      border-left: 1px solid var(--color);
      border-bottom: 1px solid var(--color);
      -webkit-transform: translate(0,-50%) rotate(-135deg);
      transform: translate(0,-50%) rotate(-135deg);
      top: 50%;
      right: 0;
    }
  }
}
.notice-swipe {
  height: 20px;
  line-height: 20px;
  .van-swipe-item{
    color: var(--color);
    line-height: 20px;
  }
}
.menu-wrap {
  flex-wrap: wrap;
}
.menu-swipe {
  &.swipe{
    padding-bottom: 10px;
  }
  :deep(.van-swipe__indicators){
    bottom: 4px;
    .van-swipe__indicator{
      background-color: var(--color);
    }
  }
}
:deep(.list-wrapper){
  padding: 0;
  .list-item{
    .list-item-img{
      margin-bottom: 0;
    }
  }
}
.list-wrapper{
  .qy-com-live-base{
    margin: 0 0 15px;
  }
}
.teacher-wrap {
  //padding: 10px 0 0;
  padding: 0 15px 10px;
  background-color: #F6F6F6;
  /*.teacher {
    padding: 0 15px;
    //background-color: #fff;
  }
  .teacher-list {
    padding: 15px;
  }*/
}
.action-content {
  padding: 25px 20px 80px;
  .default-title {
    margin-bottom: 8px;
  }
}
</style>
